<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #con {
      width: 200px;
      height: 200px;
      background: red;
    }
  </style>
</head>

<body>
  <h1>热门明星榜</h1>
  <div id="con"></div>
  <ul>
    <li>柳岩</li>
    <li>汤唯</li>
    <li class="hot">徐冬冬</li>
    <li>王一博</li>
    <li class="hot">李易峰</li>
    <li>肖战</li>
    <li>黄渤</li>
    <li>孙红雷</li>
  </ul>
  <h3>今日热搜榜</h3>
  <input type="text" id="inp">
  <script src="jquery-3.4.1.min.js"></script>
  <script>
    $(function () {
      // :first  一组元素中的第一个元素
      $("li:first").css("color", "red")
      // :last 一组元素中的最后一个
      $("li:last").css("color", "green")
      // :eq(index) 选择固定下标的元素
      $("li:eq(2)").css("color", "pink")
      // :even 选择偶数下标的元素
      $("li:even").css("background", "skyblue")
      // :odd 选择奇数行下标 的元素
      $("li:odd").css("background", "pink")
      // :gt(index) 选择大于下标的元素 不包含当前下标
      $("li:gt(3)").css("text-decoration", "line-through")
      //:lt(index) 选择小于下标的元素 不包含当前下标
      $("li:lt(3)").css("text-decoration", "underline")
      // :not(选择器) 去除所有与给定选择器匹配的元素
      $("li:not(.hot)").css("font-size", "40px")
      // :header 选取所有标题元素 h1-h6
      $(":header").css("color", "red")
      // :focus 获取当前正在聚焦的元素
      var inp = document.getElementById("inp");
      inp.focus()
      $(":focus").css("background", "blue")
      // :animated 获取正在运动的元素
      function move() {
        $("#con").slideUp(2000, function () {
          $("#con").slideDown(2000, function () {
            move()
          })
        })
      }
      move()
      // 
      $(":animated").css("background", "blue")


    })
  </script>
</body>

</html>